<ng-container *transloco="let t; read: 'license'">
  <div class="card mt-2">
    <div class="card-body">
      <div class="card-title">
        <div class="container-fluid row mb-2">
          <div class="col-10 col-sm-10">
            <h4 id="license-key-header">{{t('title')}}</h4>
          </div>
          <div class="col-2 text-end">
            <ng-container *ngIf="hasLicense; else noLicense">
              <ng-container *ngIf="hasValidLicense; else invalidLicenseBuy">
                <a class="btn btn-primary btn-sm me-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
              </ng-container>
              <ng-template #invalidLicenseBuy>
                <a class="btn btn-primary btn-sm me-1"
                   [ngbTooltip]="t('invalid-license-tooltip')"
                   href="mailto:kavitareader@gmail.com?subject=Kavita+Subscription+Renewal&body=Description%3A%0D%0A%0D%0ALicense%20Key%3A%0D%0A%0D%0AYour%20Email%3A"
                >{{t('renew')}}</a>
              </ng-template>
              <button class="btn btn-secondary btn-sm me-1" style="width: 58px" (click)="validateLicense()">
                <span *ngIf="!isChecking">{{t('check')}}</span>
                <app-loading [loading]="isChecking" size="spinner-border-sm"></app-loading>
              </button>
              <button class="btn btn-secondary btn-sm" style="width: 62px" (click)="toggleViewMode()">
                <span *ngIf="!isViewMode">{{t('cancel')}}</span>
                <span *ngIf="isViewMode">{{t('edit')}}</span>
              </button>
            </ng-container>
            <ng-template #noLicense>
              <a class="btn btn-secondary btn-sm me-1" [href]="buyLink" target="_blank" rel="noreferrer nofollow">{{t('buy')}}</a>
              <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? t('activate') : t('cancel')}}</button>
            </ng-template>
          </div>
        </div>
      </div>

      <ng-container *ngIf="isViewMode">
        <div class="container-fluid row">
          <span class="col-12">
              <ng-container *ngIf="hasLicense; else noToken">
                <span class="me-1">*********</span>
                <ng-container *ngIf="!isChecking; else checking">
                  <i *ngIf="hasValidLicense" [ngbTooltip]="t('license-valid')" class="fa-solid fa-check-circle successful-validation ms-1">
                    <span class="visually-hidden">{{t('license-valid')}}</span>
                  </i>
                  <i class="error fa-solid fa-exclamation-circle ms-1" [ngbTooltip]="t('license-not-valid')" *ngIf="!hasValidLicense">
                    <span class="visually-hidden">{{t('license-not-valid')}}</span>
                  </i>
                </ng-container>
                <ng-template #checking>
                  <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">{{t('loading')}}</span>
                  </div>
                </ng-template>

              </ng-container>
              <ng-template #noToken>{{t('no-license-key')}}</ng-template>
          </span>
        </div>
      </ng-container>

      <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">
        <form [formGroup]="formGroup">
          <p>{{t('activate-description')}}</p>
          <div class="form-group mb-3">
            <label for="license-key">{{t('activate-license-label')}}</label>
            <input id="license-key" type="text" class="form-control" formControlName="licenseKey" autocomplete="off"/>
          </div>
          <div class="form-group mb-3">
            <label for="email">{{t('activate-email-label')}}</label>
            <input id="email" type="email" class="form-control" formControlName="email" autocomplete="off"/>
          </div>
        </form>
        <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
          <button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header" (click)="deleteLicense()">
            {{t('activate-delete')}}
          </button>
          <button type="submit" class="flex-fill btn btn-primary" aria-describedby="license-key-header" [disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="saveForm()">
            <span *ngIf="!isSaving">{{t('activate-save')}}</span>
            <app-loading [loading]="isSaving" size="spinner-border-sm"></app-loading>
          </button>
        </div>
      </div>
    </div>
  </div>


</ng-container>
